<template>
    <el-container>
        <el-header :height="'auto'" class="mb20">
            <breadcrumb :title="'需求回复'" :noBack="true"></breadcrumb>
        </el-header>
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <div class="toolbar">
                        <div>
                            <el-select v-model="state" placeholder="请选择状态" class="mr10" size="small">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-input v-model="reqName" placeholder="请输入需求名称" class="input mr10"
                                      size="small"></el-input>
                            <el-button class="primary" size="small" @click="getList()">查询</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" :height="'100%'"
                                   ref="table">
                        <template slot="requirementType" slot-scope="scope">
                            <span v-if="scope.row.requirementType==1">数据需求</span>
                            <span v-if="scope.row.requirementType==2">问题反馈</span>
                        </template>
                        <template slot="requirementState" slot-scope="scope">
                            <span v-if="scope.row.requirementState==1">待处理</span>
                            <span v-else-if="scope.row.requirementState==2">已流转</span>
                            <span v-else-if="scope.row.requirementState==3">已回复</span>
                        </template>
                        <template slot="operation" slot-scope="scope">
                            <div class="operation">
                                <el-link type="primary" :underline="false"
                                         v-if="scope.row.requirementState!=2&&scope.row.requirementState!=3"
                                         @click="flowFlag(scope.row)">流转
                                </el-link>
                                <el-link type="primary" :underline="false"
                                         v-if="scope.row.requirementState!=2&&scope.row.requirementState!=3"
                                         @click="replyFlag(scope.row)">回复
                                </el-link>
                                <el-link type="primary" :underline="false"
                                         class="mr10" @click="query(scope.row)">查看
                                </el-link>
                            </div>
                        </template>
                    </table-example>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="page" v-if="page" class="page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
            <transition name="slide">
                <router-view @upload="getList"></router-view>
            </transition>
        </el-main>
        <dialog-box :show.sync="flowShow" ref="dialog" :width="'540px'" :title="'流转'" @save="flowSave"
                    @cancel="flowDel">
            <el-form class="form-common" :model="form" :rules="formRules" ref="form"
                     size="small" label-width="100px" :label-position="'left'">
                <el-form-item label="流转至：" prop="SourceDept">
                    <select-tree @loadNode="loadNode"
                                 :size="'small'"
                                 :loading.sync="provideDeptTree.loading"
                                 :renderTree.sync="provideDeptTree.renderTree"
                                 :lazy.sync="provideDeptTree.lazy"
                                 :clearable.sync="provideDeptTree.clearable"
                                 :filterable.sync="provideDeptTree.filterable"
                                 :model.sync="form.SourceDept"
                                 :accordion.sync="provideDeptTree.accordion"
                                 :expandAll.sync="provideDeptTree.expandAll"
                                 :provideDeptTree="provideDeptTree"
                                 @filterMethod="dataFilter"
                                 :props="dataConsumersprops"
                                 :options="provideDeptTree.options"
                                 @nodeClick="treeNodeClick"
                                 class="full">
                    </select-tree>
                </el-form-item>
                <el-form-item label="流转原因：" prop="rdResourceDesc">
                    <el-input type="textarea" v-model="form.rdResourceDesc" :autosize="{ minRows: 4, maxRows: 4}"
                              size="small"></el-input>
                </el-form-item>
            </el-form>
        </dialog-box>
        <dialog-box :show.sync="replyShow" ref="dialog" :width="'600px'" :title="'回复'" @save="replySave"
                    @cancel="replyDel">
            <el-form class="form-common" :model="replyForm" :rules="rules" ref="ruleForm"
                     size="small" label-width="100px" :label-position="'left'">
                <el-form-item label="回复内容：" prop="rdResourceDesc">
                    <el-input type="textarea" v-model="replyForm.rdResourceDesc" :autosize="{ minRows: 4, maxRows: 4}"
                              size="small"></el-input>
                </el-form-item>
            </el-form>
        </dialog-box>
    </el-container>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import dialogBox from '../../components/dialog'
    import selectTree from '../../components/select-tree'

    export default {
        data() {
            return {
                form: {
                    rdResourceDesc: '',
                    SourceDept: ''
                },
                replyForm: {},
                state: '',
                reqName: '',
                options: [
                    {
                        value: '',
                        label: '全部状态'
                    },
                    {
                        value: '1',
                        label: '待处理'
                    },
                    {
                        value: '3',
                        label: '已回复'
                    },
                    {
                        value: '2',
                        label: '已流转'
                    }
                ],
                tableData: [],
                header: [
                    {
                        prop: 'requirementName',
                        label: '需求名称',
                        minWidth: 130,
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'requirementType',
                        label: '类型',
                        minWidth: 150,
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'requirementState',
                        label: '状态',
                        minWidth: 120,
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'applyTime',
                        label: '申请时间',
                        minWidth: 150,
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: 100,
                        fixed: 'right'
                    }
                ],
                slotColumns: ['operation', 'requirementType', 'requirementState'],
                page: null,
                loading: false,
                index: 1,
                flowShow: false,
                replyShow: false,
                rdResourceDesc: '',
                SourceDept: {
                    value: '',
                    label: ''
                },
                flow: false,
                reply: false,
                demandId: '',
                demandName: '',
                demandType: '',
                rules: {
                    rdResourceDesc: [
                        {required: true, message: '请输入回复内容', trigger: 'blur'}
                    ]
                },
                formRules: {
                    SourceDept: [
                        {required: true, message: '请选择流转部门', trigger: 'change'}
                    ],
                    rdResourceDesc: [
                        {required: true, message: '请输入流转原因', trigger: 'blur'}
                    ]
                },
                dataConsumersprops: {
                    value: 'code', // ID字段名
                    label: 'label', // 显示名称
                    // children: 'haschildren', // 子级字段名
                    isLeaf: function (data, node) { // 是否为子节点
                        if (!data.expand) return true
                    }
                }, // 数据源部门
                provideDeptTree: { // 数据源部门树形下拉框参数
                    lazy: true,
                    clearable: false,
                    filterable: false,
                    accordion: false, // 一次只展开一个同级节点
                    expandAll: false, // 默认展开所有节点
                    loading: false, // 是否显示loading
                    renderTree: true, // 是否显示tree，隐藏后再次显示以此来重新渲染
                    options: []
                }
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/requirementReply/getRequirementList', {
                    requirementName: this.reqName || '',
                    requirementState: this.state,
                    requireOrReply: 2,
                    current: this.index || 1,
                    size: 15
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                })
            },
            query(row) {
                this.$router.push({
                    path: this.$route.path + '/detail',
                    query: {
                        id: row.requirementId
                    }
                })
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            flowFlag(row) {
                this.flowShow = true
                this.demandId = row.requirementId
                this.demandName = row.requirementName
                this.demandType = row.requirementType
            },
            replyFlag(row) {
                this.replyShow = true
                this.demandId = row.requirementId
                this.demandName = row.requirementName
                this.demandType = row.requirementType
            },
            flowSave() {
                this.validate('form', () => {
                    this.$http.post('/requirementReply/requirementFlow', {
                        requirementId: this.demandId,
                        requirementState: 2,
                        flowReason: this.form.rdResourceDesc,
                        flowReceiveDeptId: this.form.SourceDept.value,
                        flowReceiveDeptName: this.form.SourceDept.label,
                        replyInfo: ''
                    }).then(result => {
                        if (result.success) {
                            this.flowShow = false
                            this.form = {}
                            this.getList()
                        }

                    })
                })
            },
            replySave() {
                this.replyShow = true
                this.validate('ruleForm', () => {
                    this.$http.post('/requirementReply/requirementFlow', {
                        requirementId: this.demandId,
                        requirementState: 3,
                        flowReason: '',
                        flowReceiveDeptId: '',
                        flowReceiveDeptName: '',
                        replyInfo: this.replyForm.rdResourceDesc
                    }).then(result => {
                        if (result.success) {
                            this.replyShow = false
                            this.replyForm = {}
                            this.getList()
                        }

                    })
                })
            },
            flowDel() {
                this.flowShow = false
                this.$refs.form.resetFields()
            },
            replyDel() {
                this.replyShow = false
                this.$refs.ruleForm.resetFields()
            },
            // 获取树形结构数据-搜索
            dataFilter(event, callback) {
                if (this.selectTreeFilter) clearTimeout(this.selectTreeFilter)
                if (event || event !== '') {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = false
                        this.$http.get('/admin/getDeptList', {
                            keyWord: event
                        }).then(result => {
                            if (result.success) {
                                this.provideDeptTree.loading = false
                                this.provideDeptTree.options = this.$method.treeProcess(result.data)
                            }
                            this.selectTreeFilter = null
                            if (callback) callback()
                        }).catch(() => {
                            this.provideDeptTree.loading = false
                            this.selectTreeFilter = null
                            if (callback) callback()
                        })
                    }, 300)
                } else {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = true
                        if (callback) callback()
                    }, 300)
                }

            },
            loadNode(parentId, callback) {
                if (!parentId && this.firstDeptList) {
                    this.provideDeptTree.loading = false
                    if (callback) callback(this.firstDeptList)
                } else {
                    this.$http.get('/admin/getDeptList', {
                        deptId: parentId || ''
                    }).then(result => {
                        if (result.success) {
                            if (result.data[0]) {
                                result.data.forEach(item => {
                                    if (item.expand) {
                                        item.isLeaf = false
                                    } else {
                                        item.isLeaf = true
                                    }
                                    if (!item.label) {
                                        item.label = item.abbreviation || item.name
                                    }
                                })
                                if (!this.firstDeptList) this.firstDeptList = result.data
                            }
                            this.provideDeptTree.loading = false
                            if (callback) callback(result.data)
                        }
                    }).catch(() => {
                        this.provideDeptTree.loading = false
                    })
                }
            },
            treeNodeClick(node, callback) {
                if (callback) callback()
            }
        },
        components: {
            breadcrumb,
            tableExample,
            page,
            dialogBox,
            selectTree
        }
    }
</script>

<style scoped lang="less">

</style>
